import Base from "../base.js";
import theatersApi from "../../api/theaters.js";
import cinemasApi from "../../api/cinemas.js";
import seatsApi from "../../api/seats.js";
export default class extends Base {
  data = {
    theaters: {
      name: "1号厅",
      status: true,
      cinemasId: "",
    },
    cinemas: [],
  };
  // 渲染页面
  render() {
    const { name, status } = this.data.theaters;
    this.$el.html(`
        <h1  style="margin-bottom:20px;text-align:center">新增放映厅</h1>
        <form class="layui-form" action="" style="padding: 30px;width:400px;margin:auto;margin-left:480px">
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:100px">放映厅名称</label>
                <div class="layui-input-block">
                <input type="text" name="name" lay-verify="title" autocomplete="off" value="${name}" class="layui-input"  style="width:200px;">
                </div>
            </div>
    
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:100px">营业状态</label>
                <div class="layui-input-block">
                <input type="radio" name="status" value=true title="是" checked>
                <input type="radio" name="status" value=false title="否">
            </div>
            <div class="layui-form-item" style="width:300px" >
                <label class="layui-form-label" style="width:100px">所属影院</label>
                <div class="layui-input-block" style="width:200px">
                    <select name="cinemasId" lay-filter="aihao" >
                    </select>
                </div>
            </div>
          </div>
            <label class="layui-form-label" style="margin-left:60px"></label>
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">保存</button>  
      </form> 
`);
    this.form = layui.form;
    this.form.render();
    this.cinemas = $(`select[name=cinemasId]`);
  }
  // 获取所有影院
  async getCinemas() {
    this.data.cinemas = await cinemasApi.getData();
    // console.log(this.data.cinemas);
    this.rerender();
  }
  rerender() {
    // 渲染所属影院下拉列表
    const options = _.map(this.data.cinemas, (item) => {
      return `<option value=${item._id}>${item.name}</option>`;
    }).join("");
    this.cinemas.html(options).val();
    this.data.cinemas.cinemasId = this.cinemas.html(options).val();
    this.form.render();
  }
  // 新增放映厅(点击后自动生成9*9个座位)
  async add(data) {
    this.data.theaters = await theatersApi.add(data);
    //点击新增放映厅后新增座位
    const seatArr = [];
    for (let i = 1; i <= 9; i++) {
      for (let j = 1; j <= 9; j++) {
        seatArr.push({
          displayName: `${i}排${j}列`,
          theaterId: this.data.theaters._id,
        });
      }
    }
    seatArr.map((item) => {
      let displayName = item.displayName;
      let theaterId = item.theaterId;
      //新增座位
      seatsApi.add({ displayName, theaterId });
    });
  }
  handle() {
    // 新增放映厅
    this.form.on("submit(demo1)", (data) => {
      this.add(data.field);
      layer.msg("放映厅及座位添加成功");
      return false; //阻止form表单的提交
    });
  }
  async mounted() {
    this.getCinemas();
  }
}
